<template>
    <div>
            <div id="main" style="height:500px; width:500px"></div>
            <br>
            <br>
            <br>
            {{allcoop}}
            <ul v-for="i in coop">
            <li>
                {{i.name}} &ensp;&ensp;&ensp;{{i.price}}
                <button @click="friend(i.code,i.price)">友情链接</button>
            </li>
        </ul>
        
    </div>
</template>

<script>
import * as echarts from 'echarts';
    export default {
        data(){
            return{
                    coop:[],
                    tcount:0,
                    allcoop:[]
            }
        },
        methods: {
            echarts(){
                                

                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                title: {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        // { value: this.allcoop.count(code), name: this.allcoop.name },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ],
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
                };

                option && myChart.setOption(option);
            },
            getcoop(){
            this.$axios.get('/project/coop/').then(res=>{
                    this.coop = res.data.list
                    this.echarts()
            })
            },
            friend(code,price){
                this.$axios.get('http://localhost:8000/project/coopprice/?code='+code+'&price='+price).then(res=>{
                        this.allcoop = res.data.list
                })
            }
        },
        mounted() {
            this.friend()
            this.getcoop()
        },
    }
</script>

<style scoped>

</style>